<template>
  <div class="layout">
    <header class="layout-header">
      <el-row>
        <el-col :span="4">
          <h2 style="font-family: '华文行楷'">后台内容管理系统</h2>
        </el-col>
        <el-col :span="4" :offset="16">
          <div class="box">
            <div class="link" v-if="!isLogin">
              <router-link to="/login">
                <el-icon :size="18"><SwitchButton /></el-icon>
                <span>登录</span>
              </router-link>
            </div>
            <div class="user" v-else>
              <router-link to="/admin">
                <el-icon><User /></el-icon>
                <span>{{ nickName }}</span>
              </router-link>
              | <button @click="logoutFn">退出登录</button>
            </div>
          </div>
        </el-col>
      </el-row>
    </header>
    <main>
      <el-row>
        <el-col :span="4">
          <aside>
            <!-- 侧栏菜单 -->
            <my-menu></my-menu>
          </aside>
        </el-col>
        <el-col :span="20">
          <section>
            <top-bar></top-bar>
            <!-- 主要内容 -->
            <router-view></router-view>
          </section>
        </el-col>
      </el-row>
    </main>

    <el-dialog v-model="dialogVisible" title="提示" width="500" draggable>
      <span style="color: red">您确定要退出当前登录吗?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="comfirFn"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
@import './common/scss/variable.scss';
$minHeihgt: 1000px;
.layout {
  width: 100%;
  min-width: 1200px;
  background-image: url(./common/img/bg.jpg);
  background-size: cover;
  margin: 0 auto;
  user-select: none;
  .layout-header {
    width: 100%;
    // background-color: $bgColor;
    background-color: rgb(255, 255, 255, 0.8);
    padding: 20px 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-align: center;
    .box {
      text-align: right;
      a {
        justify-content: center;
      }
      button {
        background-color: transparent;
        font-size: 16px;
        cursor: pointer;
      }
      .el-icon,
      span {
        vertical-align: middle;
      }
      .el-icon {
        margin: 2px 5px 0 0px;
      }
    }
  }
  main {
    width: 100%;
    padding: 10px 15px;
    aside {
      min-height: $minHeihgt;
      // background-color: #f9f9f9;
      background-color: rgb(255, 255, 255, 0.8);
      padding: 15px 20px;
      border-radius: 15px;
    }
    section {
      min-height: $minHeihgt;
      // background-color: #f0f0f0;
      background-color: rgb(255, 255, 255, .9);
      padding: 15px 20px;
      margin: 0px 10px;
      border-radius: 15px;
    }
  }
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import MyMenu from './components/MyMenu.vue'
import TopBar from './components/TopBar.vue'

import api from './api/http'

// 初始化首页
let token = localStorage.getItem('TOKEN') 
let nickName = ref<any>('')
let isLogin = ref<boolean>(false)
let dialogVisible = ref<boolean>(false)
const $router = useRouter()

if (token) {
  isLogin.value = true
  nickName.value = localStorage.getItem('NICK_NAME')

  api.logged({ token })
  .then(content => {
    // console.log('----->', content)
    let { code } = content
    if (code != 200) {
      $router.push({ path: '/login' })
    }
  })
}
else{
    $router.push({ path: '/login' })
  }
  
const logoutFn = () => {
  dialogVisible.value = true
}
const comfirFn = () => {
  isLogin.value = false

  localStorage.removeItem('TOKEN')
  localStorage.removeItem('NICK_NAME')

  dialogVisible.value = false
  $router.replace({
    path: '/login',
  })
}
</script>
